<template>
    <view class="container">
        <!-- 顶部信息：总获利和可提现余额 -->
        <view class="topclass"
            style="height: 798rpx; background: linear-gradient(180deg, #ffdfc9 0%, rgba(252, 252, 252, 0) 100%)"></view>
        <view style="padding: 20rpx;">
            <view class="bgicss">
                <view class="textcss">
                    <span>邀请人数</span><span class="mcss">{{ totalss }}</span>
                </view>
                <view class="textcss">
                    <span>总获利</span><span class="mcss">{{ zSum }}</span>
                </view>

                <view class="textcss">
                    <span>可提现余额</span><span class="mcss">{{ yueSum }}</span>
                </view>
            </view>
            <span @click="tixian"
                style="position: absolute; top: 20px; right: 15px; font-size: 24rpx; color: #ead3d3; font-weight: bold">提现</span>
        </view>

        <!-- Tabs切换按钮 -->
        <view class="tabs">
            <div :class="{ 'tab-item': true, active: activeTab === 1 }" @click="switchTab(1)">返利记录</div>
            <div :class="{ 'tab-item': true, active: activeTab === 2 }" @click="switchTab(2)">申请提现记录</div>
        </view>

        <!-- 申请提现记录板块 -->
        <view v-show="activeTab === 2" class="invite-section">
            <list v-if="okSpForm.length > 0">
                <cell v-for="(item, index) in okSpForm" :key="index">
                    <view
                        style="display: flex; flex-direction: column; padding: 10rpx; margin-top: 10rpx; height: 162rpx; background: #ffffff; border-radius: 20rpx; justify-content: space-around">
                        <view
                            style="margin-left: 10rpx; display: flex; align-items: center; justify-content: space-between">
                            <view style="display: flex; align-items: center;font-size: 14px;">
                                <span style="color: red;" v-if="item.status == 2">拒绝原因：{{
                                    item.reasonRejection }}</span>
                                <span v-if="item.status == 0">
                                    待审核
                                </span>
                                <span style="color: green;" v-else-if="item.status == 1">
                                    已提现
                                </span>
                            </view>
                            <view style="margin-left: 20rpx; display: flex; align-items: center">
                                <view class="itemback"
                                    style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #a6a6a6; text-align: right">
                                    提现金额
                                    {{ item.exchangeIntegrain }}</view>
                            </view>
                        </view>
                        <view style="margin-left: 10rpx">
                            <view class="itemback"
                                style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 22rpx; color: #869198; text-align: left">
                                申请时间<span
                                    style="font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;  font-size: 28rpx;margin-left: 10rpx; ">{{
                                        item.createTime }}</span></view>
                        </view>
                    </view>
                </cell>
            </list>
            <view v-else
                style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
                <image class="" mode="aspectFit"
                    src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png">
                </image>
                <span
                    style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
            </view>
        </view>

        <!-- 返利记录板块 -->
        <view v-show="activeTab === 1" class="rebate-section">
            <list v-if="dataList.length > 0">
                <cell v-for="(item, index) in dataList" :key="index">
                    <view
                        style="display: flex; flex-direction: column; padding: 10rpx; margin-top: 10rpx; height: 162rpx; background: #ffffff; border-radius: 20rpx; justify-content: space-around">
                        <view
                            style="margin-left: 10rpx; display: flex; align-items: center; justify-content: space-between">
                            <view style="display: flex; align-items: center">
                                <image style="width: 75rpx; height: 75rpx; border-radius: 50%"
                                    :src="item.ebUser && item.ebUser.avatar && item.ebUser.avatar.includes('http') ? item.ebUser.avatar : imgurl + item.ebUser.avatar"
                                    mode="aspectFill"></image>
                                <view class="itemback"
                                    style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #333333; text-align: center">
                                    {{ item.ebUser && item.ebUser.nickname ? nameHide(item.ebUser.nickname) : "隐藏用户" }}
                                </view>
                            </view>
                            <view style="margin-left: 20rpx; display: flex; align-items: center">
                                <view class="itemback"
                                    style="font-family: PingFang SC, PingFang SC; font-weight: bold; font-size: 26rpx; color: #a6a6a6; text-align: right">
                                    {{ item.createTime }}</view>
                            </view>
                        </view>
                        <view style="margin-left: 10rpx">
                            <view class="itemback"
                                style="margin-left: 10rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 22rpx; color: #869198; text-align: left">
                                返利佣金：<span
                                    style="font-family: Alibaba PuHuiTi, Alibaba PuHuiTi; font-weight: 500; font-size: 28rpx; color: #ff5252">{{
                                        item.gainIntegralReture }}</span></view>
                        </view>
                    </view>
                </cell>
            </list>
            <view v-else
                style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
                <image class="" mode="aspectFit"
                    src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png">
                </image>
                <span
                    style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无数据</span>
            </view>
        </view>
    </view>
</template>

<script>
import { getMerInviteUserList, getMerInviteList, getMerListSum, getWithdrawList, tixianYue } from "../../../utils/api/local.js";
import { IMG_URL } from "../../../config/index.js";

export default {
    data() {
        return {
            okSpForm: [], /* 邀请记录*/
            imgurl: IMG_URL,
            dataList: [],  /* 返利记录 */
            total2: null,
            pageNum2: 1,
            pageSize2: 15,
            total1: null,
            pageNum1: 1,
            pageSize1: 15,
            merId: "",
            zSum: 0,
            yueSum: 0,
            activeTab: 1, // 默认激活的Tab，1表示邀请记录，2表示返利记录
            contents: '',
            ebMerInviteUserIntegrainfoIds: [],
            totalss: ''
        };
    },
    onLoad() {
        const ebMerId = uni.getStorageSync("uid");
        this.merId = ebMerId;
        this.getInviteList();
        this.getList();
        this.getSumList();


    },
    methods: {

        tixian() {
            this.contents = '确定要申请提现吗，提现金额' + this.yueSum + '元,' + '在管理员审核后72小时内到账'
            let that = this
            uni.showModal({
                title: '提示',
                content: this.contents,
                success: function (res) {
                    if (res.confirm) {
                        that.handleWithdraw();
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });

        },
        /* 申请提现 */
        handleWithdraw() {
            if (this.yueSum == 0) {
                uni.showToast({
                    title: '提现余额不足',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }
            tixianYue({
                linkId: this.merId,
                type: 3,
                exchangeIntegrain: this.yueSum,
                status: 0,
                ebMerInviteUserIntegrainfoIds: this.ebMerInviteUserIntegrainfoIds
            }).then(res => {
                if (res.code == 200 && res.data == 1) {
                    uni.showToast({
                        title: '提现申请成功，请等待审核',
                        icon: 'none',
                        duration: 2000
                    });
                    this.getInviteList();
                } else if (res.code == 200 && res.data == -1) {
                    uni.showToast({
                        title: '已有未审核的兑换记录，请勿重复提交',
                        icon: 'none',
                        duration: 2000
                    });
                }
            })
        },
        hideMiddleDigits(phoneNumber) {
            if (!phoneNumber || phoneNumber.length !== 11) return phoneNumber;
            return phoneNumber.slice(0, 3) + "****" + phoneNumber.slice(7);
        },
        nameHide(name) {
            if (name.length == 2) {
                return name.substring(0, 1) + "*";
            } else if (name.length == 3) {
                return name.substring(0, 1) + "*" + name.substring(2, 3);
            } else if (name.length > 3) {
                return name.substring(0, 1) + "*" + "*" + name.substring(3);
            }
        },
        getSumList() {
            getMerListSum({
                type: 3,
                linkId: this.merId,
            }).then((res) => {
                this.yueSum = res.data.yeSum;
                this.zSum = res.data.sum;
                this.ebMerInviteUserIntegrainfoIds = res.data.ids;
            });
            getMerInviteUserList({
                linkId: this.merId,
                type: 3,
                pageNum: this.pageNum1,
                pageSize: this.pageSize1,
            }).then((res) => {
                if (res.code === 200) {
                    this.totalss = res.total;
                }
            });
        },
        getInviteList() {
            getWithdrawList({
                linkId: this.merId,
                type: 3,
                pageNum: this.pageNum1,
                pageSize: this.pageSize1,
            }).then((res) => {
                if (res.code === 200) {
                    this.okSpForm = res.rows;
                    this.total1 = res.total;
                }
            });
        },
        getList() {
            getMerInviteList({
                pageNum: this.pageNum2,
                pageSize: this.pageSize2,
                type: 3,
                linkId: this.merId,
                addOrSub: 0,
            }).then((res) => {
                this.dataList = this.dataList.concat(res.rows);
                this.total2 = res.total;
            });
        },
        loadMoreData() {
            if (this.activeTab == 2) {
                if (this.pageNum2 * this.pageSize2 >= this.total2) {
                    uni.showToast({
                        title: "没有更多数据了",
                        icon: "none",
                    });
                } else {
                    this.pageNum2++;
                    this.getList();
                }
            } else if (this.activeTab == 1) {
                if (this.pageNum1 * this.pageSize1 >= this.total1) {
                    uni.showToast({
                        title: "没有更多数据了",
                        icon: "none",
                    });
                } else {
                    this.pageNum1++;
                    this.getInviteList();
                }
            }

        },
        switchTab(tabIndex) {
            this.activeTab = tabIndex;
        },
    },
    onReachBottom() {
        this.loadMoreData();
    },
};
</script>

<style scoped>
.textcss {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
}

.mcss {
    width: 166rpx;
    height: 48rpx;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: bold;
    font-size: 40rpx;
    color: #ffffff;
    line-height: 48rpx;
    text-align: center;
}

.bgicss {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-image: url(https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/08/小程序后台_20250508150126A002.png);
    margin-top: -780rpx;
    background-size: 100% 100%;
    height: 188rpx;
    width: 100%;
}

.tabs {
    display: flex;
    justify-content: space-around;
    margin-top: -580rpx;
}

.tab-item {
    font-size: 28rpx;
    color: #333;
    padding: 10rpx 0;
    text-align: center;
    width: 50%;
    cursor: pointer;
}

.tab-item.active {
    color: #ff5252;
    border-bottom: 2rpx solid #ff5252;
}

.invite-section,
.rebate-section {
    padding: 20rpx;
}

.section-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
}
</style>
